<template>
  <div class="pageWrapper">
    <common-header :showBack="false" />
    <div class="content" v-if="isLogin && isDD">
      <div class="banner-wrap">
        <img class="banner" src="@/assets/index/banner.png" />
        <div class="banner-des">
          切实发挥考核指挥棒、风向标、助推器作用，通过考核奖优罚劣、激励担当、促进发展。
        </div>
      </div>
      <div class="list">
        <div class="list-item" @click="redirectTo('/normal')">
          <div class="item-icon">
            <img src="@/assets/index/normal-icon.png" />
          </div>
          <div class="item-title">平时考核</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" @click="redirectTo('/year')">
          <div class="item-icon">
            <img src="@/assets/index/year-icon.png" />
          </div>
          <div class="item-title">年度考核</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <!-- <div class="list-item" @click="redirectTo('/regulation')">
          <div class="item-icon">
            <img src="@/assets/index/regulation-icon.png" />
          </div>
          <div class="item-title">考核制度</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div> -->
      </div>
    </div>
    <!-- <div style="word-break:break-all">{{ token }}</div> -->
    <common-empty v-if="!isDD" message="请复制链接地址，<br />在浙政钉app中打开该链接" />
    <common-empty v-else-if="!isLogin" message="无数据请联系后台<br />管理员添加考核人员或评鉴人员" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Index",
  components: {},
  computed: {
    ...mapState({
      isLogin: state => state.user.is_login,
      isDD: state => state.user.is_dd,
      token: state => state.user.token
    })
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    redirectTo(path) {
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 16px;
  .banner-wrap {
    position: relative;
    .banner {
      display: block;
      width: 100%;
      margin-bottom: 20px;
    }
    .banner-des {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
      z-index: 2;
      line-height: 22px;
      font-size: 13px;
      color: #fff;
      width: 218px;
    }
  }

  .list-item {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 8px;
    padding: 18px 20px 18px 24px;
    font-size: 14px;
    color: #333333;
    &:active {
      background: #f9f9f9;
    }
    img {
      width: 32px;
      display: block;
    }
    .item-title {
      flex: 1;
    }
    .item-icon {
      margin-right: 16px;
    }
  }
}
</style>
